<template>
  <!--侧滑菜单容器-->
  <div id="offCanvasWrapper" class="mui-off-canvas-wrap">
    <!--菜单部分-->
    <div
      v-if="isShowFilter"
      @click="isShowFilter = false"
      class="filter-bg"
    ></div>
    <aside
      v-if="isShowFilter"
      id="offCanvasSide"
      class="mui-off-canvas-right aside-menu filter-wrap"
    >
      <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
        <div class="mui-scroll flex-column flex-space-between">
          <div>
            <h4 class="means-title">发布时间</h4>
            <div class="flex-justify-start">
              <div
                @click.stop="showTimePicker(0)"
                class="gray-btn time-filter-input"
              >
                <input
                  class="gray-btn"
                  type="text"
                  readonly
                  v-model="startTime"
                  placeholder="开始时间"
                />
              </div>
              <p style="margin-top: 13px; margin-left: 5px">-</p>
              <div
                @click.stop="showTimePicker(1)"
                class="gray-btn time-filter-input"
              >
                <input
                  class="gray-btn"
                  type="text"
                  readonly
                  v-model="endTime"
                  placeholder="结束时间"
                />
              </div>
            </div>
          </div>
          <div class="flex-center screen-btn">
            <div @click="reset" class="reset-btn offCanvasHide">重置</div>
            <div @click="submit" class="sure-btn offCanvasHide">确定</div>
          </div>
        </div>
      </div>
    </aside>
    <div class="mui-inner-wrap">
      <div
        id="offCanvasContentScroll"
        class="mui-content mui-scroll-wrapper record-member-lists"
      >
        <header @click="isShowFilter = false" class="mui-bar mui-bar-nav">
          <div class="header-common-title flex-justify-start">
            <a @click="fn.back()" href="javascript:void(0)"
              ><img class="back-btn" src="../../../../static/images/back.png"
            /></a>
            <div class="header-search flex-center">党务公开</div>
            <div class="header-right flex-between-center">
              <img
                @click="search"
                class="back-btn"
                src="../../../../static/images/search_white.png"
              />
              <a
                @click.stop="isShowFilter = true"
                href="javascript:void(0)"
                class="header-right flex-center"
                ><img src="../../../../static/images/shaixuan.png" />筛选</a
              >
            </div>
          </div>
        </header>
        <div class="organization-tab mui-segmented-control flex-between-center">
          <a
            @click="loadData('partyaffairsoffice')"
            :class="{ 'mui-active': tabIndex == 0 }"
            class="mui-control-item"
            href="javascript:void(0)"
            >组织发布</a
          >
          <a
            @click="loadData('branch')"
            :class="{ 'mui-active': tabIndex == 1 }"
            class="mui-control-item"
            href="javascript:void(0)"
            >我的支部</a
          >
          <a
            @click="goOtherBranch"
            class="mui-control-item"
            href="javascript:void(0)"
            >全狱支部</a
          >
          <img
            v-if="canEdit()"
            @click="affairsAdd()"
            class="back-btn"
            src="../../../../static/images/icon_add.png"
          />
        </div>
        <div
          @click="isShowFilter = false"
          class="mui-scroll-wrapper"
          style="padding-top: 90px"
        >
          <div class="mui-scroll mui-scroll-wrapper">
            <!-- --------组织---------------start -->
            <div
              v-if="tabIndex == 0"
              id="organization"
              class="mui-active mui-scroll-wrapper"
              style="padding-top: 90px"
            >
              <div
                class="organization-lists mui-scroll-wrapper"
                style="padding-top: 90px"
              >
                <cube-scroll
                  ref="scroll"
                  :options="options"
                  @pulling-up="onPullingUp"
                >
                  <cube-swipe>
                    <transition-group name="swipe" tag="div">
                      <div
                        class="mui-table-view-cell"
                        v-for="(data, index) in partyaffairsofficeData"
                        :key="data.id"
                      >
                        <cube-swipe-item
                          ref="swipeItem"
                          :btns="data.btns"
                          :index="index"
                          :class="{
                            'swiper-no-swiping': !canEditOrDelete(data),
                          }"
                          @btn-click="edit"
                        >
                          <div @click="detail(data)">
                            <div class="mui-slider-handle">
                              <h2 class="organization-lists-title">
                                {{ data.title }}
                              </h2>
                              <div class="organization-lists-time">
                                <span
                                  >{{ data.createTime }}
                                  {{ data.publisherName }}&nbsp;{{
                                    data.sourceOfPublication
                                  }}&nbsp;阅读：{{ data.readingVolume }}</span
                                >
                              </div>
                            </div>
                          </div>
                        </cube-swipe-item>
                      </div>
                    </transition-group>
                  </cube-swipe>
                  <!-- <div
                    class="text-center no-data"
                    v-if="partyaffairsofficeData.length === 0"
                  >
                    <img src="../../../../static/images/no_data.png" alt="" />
                    <p>暂无数据</p>
                  </div> -->
                  <!-- W noData -->
                  <noData
                    v-if="partyaffairsofficeData.length === 0"
                  ></noData>
                  <onBottom v-else-if="onBottom"></onBottom>
                </cube-scroll>
              </div>
            </div>
            <!-- --------组织---------------end -->
            <!-- --------支部---------------start -->
            <div
              v-if="tabIndex == 1"
              id="branch"
              class="mui-active mui-scroll-wrapper"
              style="padding-top: 90px"
            >
              <div
                class="organization-lists mui-scroll-wrapper"
                style="padding-top: 90px"
              >
                <cube-scroll
                  ref="scroll"
                  :options="options"
                  @pulling-up="onPullingUp"
                >
                  <cube-swipe>
                    <transition-group name="swipe" tag="div">
                      <div
                        class="mui-table-view-cell"
                        v-for="(data, index) in branchData"
                        :key="data.id"
                      >
                        <cube-swipe-item
                          ref="swipeItem"
                          :btns="data.btns"
                          :class="{
                            'swiper-no-swiping': !canEditOrDelete(data),
                          }"
                          :index="index"
                          @btn-click="edit"
                        >
                          <div @click="detail(data)">
                            <div class="mui-slider-handle">
                              <h2 class="organization-lists-title">
                                {{ data.title }}
                              </h2>
                              <div class="organization-lists-time">
                                <span
                                  >{{ data.createTime }}
                                  {{ data.publisherName }}&nbsp;{{
                                    data.sourceOfPublication
                                  }}&nbsp;阅读：{{ data.readingVolume }}</span
                                >
                              </div>
                            </div>
                          </div>
                        </cube-swipe-item>
                      </div>
                    </transition-group>
                  </cube-swipe>
                  <!-- <div
                    class="text-center no-data"
                    v-if="branchData.length === 0"
                  >
                    <img src="../../../../static/images/no_data.png" alt="" />
                    <p>暂无数据</p>
                  </div> -->
                  <!-- W noData -->
                  <noData
                    v-if="branchData.length === 0"
                  ></noData>
                  <onBottom v-else-if="onBottom"></onBottom>
                </cube-scroll>
              </div>
            </div>
            <!-- --------支部---------------end -->
            <!-- --------其他支部---------------start -->
            <div
              v-if="tabIndex == 2"
              id="other"
              class="mui-active mui-scroll-wrapper"
              style="padding-top: 90px"
            >
              <div class="message-tab people-header" style="padding-top: 50px">
                <div class="header-search all-search">
                  <input
                    type="search"
                    name=""
                    placeholder="请输入支部名称搜索"
                  />
                  <i class="people-search"></i>
                </div>
              </div>
              <div
                class="organization-lists mui-scroll-wrapper"
                style="padding-top: 160px"
              >
                <cube-scroll
                  ref="scroll"
                  :options="options"
                  @pulling-up="onPullingUp"
                >
                  <cube-swipe>
                    <transition-group name="swipe" tag="div">
                      <div v-for="(data, index) in otherData" :key="data.id">
                        <cube-swipe-item
                          ref="swipeItem"
                          :btns="data.btns"
                          :class="{
                            'swiper-no-swiping': !canEditOrDelete(data),
                          }"
                          :index="index"
                        >
                          <div
                            class="mui-table-view-cell list-item"
                            @click="detail(data)"
                          >
                            <li class="mui-navigate-right">支部名称0</li>
                          </div>
                        </cube-swipe-item>
                      </div>
                    </transition-group>
                  </cube-swipe>
                  <!-- <div
                    class="text-center no-data"
                    v-if="otherData.length === 0"
                  >
                    <img src="../../../../static/images/no_data.png" alt="" />
                    <p>暂无数据</p>
                  </div> -->
                  <!-- W noData -->
                  <noData
                    v-if="otherData.length === 0"
                  ></noData>
                  <onBottom v-else-if="onBottom"></onBottom>
                </cube-scroll>
              </div>
            </div>
            <!-- --------其他支部---------------end -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import footerbar from "../common/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";

export default {
  components: {
    footerbar,
  },
  name: "",
  data() {
    return {
      fn: tools,
      isShowFilter: false,
      tabIndex: 0,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      branchData: [],
      partyaffairsofficeData: [],
      otherData: [],
      infinite: true,
      pageIndex: 0,
      pageSize: 10,
      currentSourceOfPublicationId: "",
      startTime: "",
      endTime: "",
    };
  },
  created() {
    let sourceOfPublicationId =
      this.$store.state.sourceOfPublicationId || "partyaffairsoffice";
    this.loadData(sourceOfPublicationId);
  },
  methods: {
    // 是否可以添加修改
    canEdit() {
      let roleType = this.$store.state.roleType || "";
      return tools.hasRoleType(roleType);
    },
    canEditOrDelete(data) {
      return (
        data.modifyAuthority === "true" || data.deletePermission === "true"
      );
    },
    canDelete(partyGroupId) {
      let roleType = this.$store.state.roleType || "";
      let myPartyGroupId = this.$store.state.userInfo.partyMemberModel
        .partyGroupId;
      // 支部一致，才能删除
      if (partyGroupId == myPartyGroupId) {
        return true;
      } else {
        // 党务办 可以删除自己的和其他支部的
        if (tools.isDWB()) {
          return true;
        }
        return false;
      }
    },
    edit(btn, index) {
      let data;
      if (this.tabIndex === 0) {
        data = this.partyaffairsofficeData[index];
      } else if (this.tabIndex === 1) {
        data = this.branchData[index];
      } else {
        data = this.otherData[index];
      }
      if (btn.action === "edit") {
        this.$store.state.editAffairsData = null;
        this.$store.state.editAffairsData = data;
        this.$router.push({ name: "affairsAdd" });
      } else if (btn.action === "delete") {
        this.deleteItem(data.id);
      }
    },
    detail(data) {
      let userInfo = this.$store.state.userInfo || {};
      let param = {
        affarisId: data.id,
        partyMemberId: userInfo.partyMemberModel.id,
      };
      loginService.getPartyAffairsInfo(param).then((res) => {
        if (res.code !== 200) {
          return tools.tip(res.message);
        }
        this.$store.state.affairsData = res.data;
        this.$router.push({ path: `/newsDetails/${data.id}/1` });
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData(this.currentSourceOfPublicationId);
    },
    loadData(sourceOfPublicationId) {
      this.$store.state.sourceOfPublicationId = sourceOfPublicationId;
      if (this.currentSourceOfPublicationId !== sourceOfPublicationId) {
        this.pageIndex = 0;
        this.branchData = [];
        this.partyaffairsofficeData = [];
        this.otherData = [];
      }
      this.currentSourceOfPublicationId = sourceOfPublicationId;
      let userInfo = this.$store.state.userInfo;
      let partyGroupId;
      let sourceOfPublicationIdParam = sourceOfPublicationId;
      if (sourceOfPublicationId === "partyaffairsoffice") {
        this.tabIndex = 0;
      } else if (sourceOfPublicationId === "branch") {
        this.tabIndex = 1;
        partyGroupId = userInfo.partyMemberModel.partyGroupId;
      } else {
        this.tabIndex = 2;
        sourceOfPublicationIdParam = "branch";
      }
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        sourceOfPublicationId: sourceOfPublicationIdParam,
        sortOrder: "DESC",
        sortField: "createTime",
        startTime: this.startTime,
        endTime: this.endTime,
        partyGroupId: partyGroupId,
      };
      loginService.getPartyAffairs(data).then((res) => {
        if (res.code !== 200) {
          this.$refs.scroll.forceUpdate();
          return tools.tip(
            res.describe === "未查询到资源" ? "已无更多数据" : res.describe
          );
        }
        this.pageIndex++;
        res.data.forEach((v, i) => {
          v.btns = [];
          if (res.data[i].modifyAuthority === "true") {
            v.btns.push({
              action: "edit",
              text: "修改",
              color: "#f0ad4e",
            });
          }
          if (res.data[i].deletePermission === "true") {
            v.btns.push({
              action: "delete",
              text: "删除",
              color: "#f00",
            });
          }
        });
        if (sourceOfPublicationId === "partyaffairsoffice") {
          this.partyaffairsofficeData = this.partyaffairsofficeData.concat(
            res.data
          );
        } else if (sourceOfPublicationId === "branch") {
          this.branchData = this.branchData.concat(res.data);
        } else {
          this.otherData = this.otherData.concat(res.data);
        }
        setTimeout(() => {
          this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = !true;
        }, 100);
      });
    },
    affairsAdd() {
      console.log("affairsAdd");
      this.$store.state.editAffairsData = null;
      this.$router.push({ path: `/affairsAdd` });
    },
    search() {
      let userInfo = this.$store.state.userInfo;
      let partyGroupId = userInfo.partyMemberModel.partyGroupId;
      this.$router.push({ path: `keyword/${partyGroupId}` });
    },
    delPartyAffairsById(_this, id) {
      loginService.delPartyAffairsById(id).then((res) => {
        tools.tip(res.message);
        if (_this.tabIndex === 0) {
          _this.pageIndex = 0;
          _this.partyaffairsofficeData = [];
        } else if (_this.tabIndex === 1) {
          _this.pageIndex = 0;
          _this.branchData = [];
        } else {
          _this.pageIndex = 0;
          _this.otherData = [];
        }
        _this.loadData(_this.currentSourceOfPublicationId);
      });
    },
    deleteItem(id) {
      let _this = this;
      this.$createDialog({
        type: "confirm",
        // icon: "cubeic-alert",
        title: "温馨提示",
        content: "确定删除记录吗？",
        confirmBtn: {
          text: "确定删除",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消删除",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          _this.delPartyAffairsById(_this, id);
        },
        onCancel: () => {},
      }).show();
    },
    showTimePicker(flag) {
      let _this = this;
      this.$createDatePicker({
        onSelect: (selectedTime, selectedText, formatedTime) => {
          if (flag === 0) {
            _this.startTime = moment(selectedTime).format("YYYY-MM-DD");
          } else {
            _this.endTime = moment(selectedTime).format("YYYY-MM-DD");
          }
        },
      }).show();
      //        this.$createTimePicker({
      //          minuteStep: 1,
      //          delay: 1,
      //          min: parseInt(moment().subtract(10, 'days').format('x')),
      //          day: {
      //            len: 90,
      //            filter: ['今天', '明天'],
      //            format: 'M月d日'
      //          },
      //          onSelect: (selectedTime, selectedText, formatedTime) => {
      //            if (flag === 0) {
      //              _this.startTime = moment(selectedTime).format('YYYY-MM-DD HH:mm:ss')
      //            } else {
      //              _this.endTime = moment(selectedTime).format('YYYY-MM-DD HH:mm:ss')
      //            }
      //          }
      //        }).show().setTime(parseInt(moment().format('x')))
    },
    reset() {
      this.startTime = "";
      this.endTime = "";
    },
    submit() {
      this.pageIndex = 0;
      this.branchData = [];
      this.partyaffairsofficeData = [];
      this.otherData = [];
      this.loadData(this.currentSourceOfPublicationId);
      this.isShowFilter = false;
    },
    goOtherBranch() {
      this.$router.push({ name: "otherBranch" });
    },
  },
};
</script>
<style scoped="" lang="scss">
#offCanvasSide {
  visibility: visible;
  z-index: 3;
}

.swiper-no-swiping {
  transform: translateX(0) !important;
}

.filter-wrap {
  z-index: 3;
  visibility: visible;
}

.filter-bg {
  background: rgba(#000, 0.3);
  z-index: 2;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
</style>
